<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../header.jsp"%>
</head>
<body>
	<script type="text/javascript">
		var editedRoleId = undefined;
		var editText = "";
		$(function() {
			$("#role_tree").tree(
					{
						onContextMenu : function(e, node) {
							e.preventDefault();
							$("#role_tree").tree("select", node.target);
							$("#treeMenu").menu("show", {
								left : e.pageX,
								top : e.pageY
							});
						},
						onAfterEdit : function(node) {
							if (validateNode(node)) {
								var role = new Object();
								role.name = node.text;
								role.id = node.id;
								var parentRole = $("#role_tree").tree(
										"getParent", node.target);
								if (parentRole != null)
									role.parentId = parentRole.id;
								saveRole(role);
							} else {
								$("#role_tree").tree("update", {
									target : node.target,
									text : editText
								});
								editText = "";
							}
						},
						onLoadSuccess : function(node, data) {
							if (editedRoleId != undefined) {
								var newRole = $("#role_tree").tree("find",
										editedRoleId);
								$("#role_tree").tree("select", newRole.target);
								editedRoleId = undefined;
							}
						},
						onDblClick : function(node) {
							$("#role_tree").tree("beginEdit", node.target);
						},
						onBeforeEdit : function(node) {
							editText = node.text;
						}
					});

			var rolePanel = $("#role_panel").layout();
			rolePanel.bind("contextmenu", function(e) {
				e.preventDefault();
				var roleItems = $("#role_tree li");
				if (roleItems.length == 0) {
					$("#rootMenu").menu("show", {
						left : e.pageX,
						top : e.pageY
					});
				}
			});
		});

		function addRootRole() {
			$("#add_one_window").window("open");
		}
		function clearForm() {
			$("#role_form").form("clear");
		}
		function submitForm() {
			var validate = $("#role_form").form("validate");
			if (validate) {
				var role = new Object();
				role.name = $("#role_form").find("#roleName").val();
				saveRole(role);
			}
		}

		function addRole() {
			var roleTree = $("#role_tree");
			var node = roleTree.tree("getSelected");
			roleTree.tree("append", {
				parent : node.target,
				data : [ {
					text : "新建角色"
				} ]
			});
			var childrenRoles = roleTree.tree("getChildren", node.target);
			var addedRole = childrenRoles[childrenRoles.length - 1];
			roleTree.tree("beginEdit", addedRole.target);
		}

		function editRole() {
			var roleTree = $("#role_tree");
			var node = roleTree.tree("getSelected");
			roleTree.tree("beginEdit", node.target);
		}

		function removeRole() {
			var roleTree = $("#role_tree");
			var node = roleTree.tree("getSelected");
			if (canDelete(node)) {
				var role = new Object();
				role.id = node.id;
				$.post("identity/role/removeRole.html", role, function(data) {

					if (data.success) {
						roleTree.tree("remove", node.target);
					}
					showMessage(data.msg);
				}, "json");
			} else {
				showAlert("无法删除该角色！");
			}
		}

		function saveRole(role) {
			$.post("identity/role/saveRole.html", role, function(data) {
				if (data) {
					if (data.success) {
						$("#add_one_window").window("close");
						var parentId = data.obj.parentId;
						if (parentId == null) {
							$("#role_tree").tree("reload");
						} else {
							var parentRole = $("#role_tree").tree("find",
									parentId);
							$("#role_tree").tree("reload", parentRole.target);
							editedRoleId = data.obj.id;
						}
					}
					showMessage(data.msg);
				}
			}, "json");
		}

		function validateNode(node) {
			if (node.text == "" || node.text == editText)
				return false;
			else
				return true;
		}

		function canDelete(node) {
			var roleTree = $("#role_tree");
			return roleTree.tree("isLeaf", node.target);
		}
	</script>
	<div class="easyui-layout" fit="true" border="false">
		<div id="role_panel" region="west" split="true" style="width: 200px; border-style: none solid;">
			<ul id="role_tree" class="easyui-tree" style="padding-top: 5px" required="true"
				url="identity/role/listRoles.html"></ul>
		</div>
		<div region="center" style="overflow: hidden; border-style: none solid;"></div>
	</div>
	<div id="rootMenu" class="easyui-menu" style="width: 120px;">
		<div onclick="addRootRole()" data-options="iconCls:'icon-add'">添加</div>
	</div>
	<div id="treeMenu" class="easyui-menu" style="width: 120px;">
		<div onclick="addRole()">添加</div>
		<div onclick="editRole()">修改</div>
		<div onclick="removeRole()">删除</div>
		<div class="menu-sep"></div>
		<div onclick="addRootRole()">展开</div>
		<div onclick="addRootRole()">合并</div>
		<div class="menu-sep"></div>
		<div onclick="addRootRole()">授权</div>
	</div>
	<div id="add_one_window" class="easyui-window" title="添加角色"
		data-options="modal:true,closed:true,iconCls:'icon-save',minimizable:false,maximizable:false,resizable:false,collapsible:false"
		style="width: 240px; height: 104px; padding: 10px; text-align: center">
		<form id="role_form" method="post">
			<table class="center">
				<tr>
					<td>角色名称：</td>
					<td><input id="roleName" class="easyui-validatebox" type="text" name="name"
						data-options="required:true"></input></td>
				</tr>
			</table>
			<div style="text-align: center; padding: 5px">
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">确定</a> <a
					href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">取消</a>
			</div>
		</form>
	</div>
</body>
</html>